<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>鼠标控制场景旋转和缩放 - iThreeJS</title>
		<style type="text/css">
			* {margin:0;padding:0;}
			html, body {overflow:hidden;}
		</style>
	</head>
	
	<body>
		
		<script type="text/javascript" src="../../assets/js/three.min.js"></script>
		<script type="text/javascript" src="../../assets/js/controls/OrbitControls.js"></script>
		<script type="text/javascript">
			/*
			 * 场景
			 */
			let scene = new THREE.Scene();
			
			/*
			 * 网格模型
			 */
			let geometry = new THREE.BoxGeometry(100, 100, 100); //立方体
			let material = new THREE.MeshNormalMaterial(); //法向量材质
			let mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh); //把网格模型添加到场景中
			
			/*
			 * 照相机
			 */
			let w = window.innerWidth;
			let h = window.innerHeight;
			let k = w / h;
			let s = 200; //场景显示范围控制系数，系数越大，显示的范围越大
			let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); //正交投影照相机
			camera.position.set(200, 300, 200); //设置照相机位置
			camera.lookAt(scene.position); //设置照相机方向
			
			/*
			 * 渲染器
			 */
			let renderer = new THREE.WebGLRenderer();
			renderer.setSize(w, h); //设置渲染区域大小
			renderer.setClearColor(0x000000, 1); //设置渲染区域背景颜色
			document.body.appendChild(renderer.domElement); //在body中添加canvas
			
			function render() {
				renderer.render(scene, camera); //执行渲染
				
				//也可以使用周期性渲染的方式实现旋转和缩放
				//此时无需显式监听ctrl变化
				//requestAnimationFrame(render);
			}
			render();
			
			/*
			 * 控件对象
			 * Orbit controls allow the camera to orbit around a target.
			 */
			let ctrl = new THREE.OrbitControls(camera, renderer.domElement); //以camera作为参数，可以监听鼠标变化，更改camera的属性
			ctrl.addEventListener("change", render);  //监听鼠标事件，触发渲染函数
		</script>
	</body>
</html>